<template>
  <div class="clssify" >
    <van-tabs @click="onClick">
      <van-tab v-for="item in list" :title="item.name" :key="item.id" :name="item.id">
    </van-tab>
    </van-tabs>
    <div class="song-list">
        <h3>{{this.title}}</h3>
        <div class="song-box" v-for="item in songs" :key="item.id">
            <div class="left">
                <div><img :src="item.intervenePicUrl" alt=""></div>
            </div>
            <span><van-icon name="play-circle-o" size="18" />{{item.subCount}}万</span>
            <div class="right">
                <div class="top">{{item.rcmdtext}}</div>
                <div class="dunder">{{item.name}}</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { reqClassify,reqSongList } from "../../../api/radio";
export default {
  data() {
    return {
      list: [],
      songs: [],
      title:"",
    };
  },
  computed: {},
  watch: {},

  methods: {
    //获取歌曲分类
    async getSongList() {
      const res = await reqClassify();
      // console.log(res.data.categories);
      res.data.categories.splice(12, 1);
      res.data.categories.forEach((item) => {
        this.list.push({
          name: item.name,
          img: item.picIPadUrl,
          id: item.id,
        });
      });
      console.log(this.list);
      const id = this.list[0].id;
      const title = this.list[0].name
      this.onClick(id,title);
    },
    //点击获取歌曲分类
    async onClick(name,title) {
        this.title = title;
      const res = await reqSongList(name);
      if(res.data.code === 200){
          this.songs = res.data.djRadios;
      }
      console.log(this.songs);
    },
  },
  created() {
    this.getSongList();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.song-list{
    width: 100%;
    min-height: 80px;
    padding-bottom: 45px;
}
h3{
    height: 35px;
    line-height: 35px;
    margin-left: 15px;
}
.song-box{
    width: 93%;
    height: 80px;
    display: flex;
    padding: 8px;
    position: relative;
}
.left{
    width: 25%;
    height: 80px;
}
.left img{
    width: 78px;
}
.right{
    width: 70%;
    height: 80px;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    font-size: 14px;
}
.right div{
    flex: 1;
}
.top{
    line-height:40px;
}
.song-box span{
    position: absolute;
    top: 5px;
    right: 20px;
    font-size: 12px;
    color: #ccc;
}
</style>
